page-roster-list {
    @import "../../../style/component/switch-bar";

    $default-color: #333333;
    $color-font: #35ac63;

    @function computed-vw($px) {
        @return $px/1080*100vw;
    }

    .toolbar-ios {
        ion-title {
            height: 100%;
            padding: 0 computed-vw(150);
        }
        .toolbar-title-ios {
            .nav-btn {
                height: 100%;
                color: #fff;
                background-color: transparent;
                padding: 0;
                text-align: center;
                font-size: computed-vw(60);
                &_active {
                    color: rgb(255, 202, 55);
                }
                &:first-child {
                    margin-right: computed-vw(220);
                }
            }
        }
    }
    .expand-modal2 {
        background-color: transparent;
        opacity: 0;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        margin-top: 17.6vw;
        width: 100%;
        height: computed-vw(260);
        background-origin: content-box;
        pointer-events: auto;
    }
    .expand-modal {
        background-color: #000;
        opacity: .4;
        position: fixed;
        z-index: 101;
        left: 0;
        top: 0;
        margin-top: 17.6vw;
        width: 100%;
        height: 100%;
        background-origin: content-box;
        pointer-events: auto;
        &_dis {
            height: 0;
        }
    }
    .fixed-bar {
        background-color: #fff;
        width: 100%;
        height: computed-vw(150);
        font-size: computed-vw(42);
        color: $default-color;
        padding: computed-vw(30) computed-vw(60);
        top: computed-vw(150);
        position: relative;
        border-top: computed-vw(1) solid #e4e5e6;
        span {
            float: left;
            line-height: computed-vw(82);
        }
        .roster-num {
            overflow: hidden;
            white-space: normal;
            text-overflow: ellipsis;
        }
        .btn-wrapper {
            float: right;
        }
        .button-ios {
            margin: 0;
            padding: 0;
            width: computed-vw(180);
            height: computed-vw(80);
            color: #fff;
            border-radius: computed-vw(40);
            float: left;
            font-size: computed-vw(39);
        }
        .map-btn {
            background-color: #018c63;
            margin-left: computed-vw(20);
            i {
                display: inline-block;
                width: computed-vw(39);
                height: computed-vw(39);
                background-image: url('../assets/images/activity/roster-list/map.png');
                background-size: 100% 100%;
                margin-right: computed-vw(6);
            }
        }
        .filter-btn {
            background-color: #35ac63;
            margin-left: computed-vw(20);
            i {
                display: inline-block;
                width: computed-vw(39);
                height: computed-vw(39);
                background-image: url('../assets/images/activity/roster-list/filter.png');
                background-size: 100% 100%;
                margin-right: computed-vw(6);
            }
        }

        .sort-btn {
            background-color: #00a69c;
            i {
                display: inline-block;
                width: computed-vw(39);
                height: computed-vw(39);
                background-image: url('../assets/images/activity/roster-list/sort.png');
                background-size: 100% 100%;
                margin-right: computed-vw(6);
            }
        }

        .expand-bar {
            position: absolute;
            width: 0;
            height: 1px;
            left: computed-vw(540);
            bottom: 0;
            transform: translateX(-50%);
            //transition: all .2s ease-in-out;
            background-color: #35AC63;
            &_open {
                width: 100%;
            }
        }

        .next-bar {
            left: 0;
        }

        .expand-select {
            position: absolute;
            top: computed-vw(140);
            transition: all .2s ease-in-out;
            max-height: 0;
            background-color: #fff;
            //width: computed-vw(300);
            //left: computed-vw(390);
            width: 100%;
            left: 0;
            overflow: hidden;
            z-index: 1001;
            box-shadow: computed-vw(10) computed-vw(10) computed-vw(40) rgba(0, 0, 0, .1);
            &_open {
                max-height: computed-vw(1000);
            }
        }

        .next {
            left: computed-vw(570);
        }

        .expand-title {
            height: computed-vw(90);
            line-height: computed-vw(90);
            background-color: #eeeeee;
            color: #999999;
            font-size: computed-vw(36);
            text-align: center;
        }

        .expand-option {
            color: #333333;
            font-size: computed-vw(42);
            height: computed-vw(110);
            line-height: computed-vw(110);
            padding: 0 computed-vw(60);
            border-bottom: computed-vw(1) solid #e9e9e9;
            &_selected {
                color: #35ac63;
                position: relative;
                &:after {
                    content: " ";
                    position: absolute;
                    width: computed-vw(42);
                    height: computed-vw(42);
                    background-image: url(../assets/images/client/client-filter/icon_checked.png);
                    background-size: 100% 100%;
                    right: computed-vw(60);
                    top: computed-vw(34);
                }
            }
        }
    }
    .title-bar {
        top: computed-vw(300);
        box-shadow: 0 0 50px rgba(0,0,0,0.1);
    }
    .title-bar2 {
        top: computed-vw(300);
    }
    .scroll-content {
        background-color: rgb(243, 243, 243) !important;
    }
    .card-list {
        margin-top: computed-vw(480);
        padding: computed-vw(30);
        background-color: rgb(243, 243, 243);
        position: relative;
    }
    .hide {
        display: none;
    }
}
